/**
 * admui-basic v2.1.0 (http://www.admui.com/)
 * Copyright 2015-2019 Admui Team
 * Licensed under the Admui License 1.1 (http://www.admui.com/about/license)
 */
(function(document, window, $) {
  'use strict';

  /* global Rickshaw */

  // 图表示例
  var rickshawPage = {
    exampleOne: function() {
      // 曲线图示例
      var seriesData = [[], [], []];
      var random = new Rickshaw.Fixtures.RandomData(150);
      var i = 0;
      var $element = $('#exampleChart');
      var graph;
      var detail;
      var legend;
      var series;
      var axes;

      for (; i < 150; i += 1) {
        random.addData(seriesData);
      }

      graph = new Rickshaw.Graph({
        element: $element.get(0),
        width: $element.width(),
        height: 300,
        renderer: 'line',
        series: [
          {
            color: $.getColor('purple', 500),
            data: seriesData[0],
            name: '北京'
          },
          {
            color: $.getColor('red', 500),
            data: seriesData[1],
            name: '上海'
          },
          {
            color: $.getColor('green', 500),
            data: seriesData[2],
            name: '广州'
          }
        ]
      });
      graph.render();

      setInterval(function() {
        random.removeData(seriesData);
        random.addData(seriesData);
        graph.update();
      }, 2000);

      detail = new Rickshaw.Graph.HoverDetail({
        graph: graph
      });
      console.log(detail);

      legend = new Rickshaw.Graph.Legend({
        graph: graph,
        element: document.getElementById('exampleChartLegend')
      });

      series = new Rickshaw.Graph.Behavior.Series.Toggle({
        graph: graph,
        legend: legend
      });
      console.log(series);

      axes = new Rickshaw.Graph.Axis.Time({
        graph: graph
      });
      axes.render();

      $(window).on('resize', function() {
        graph.configure({
          width: $element.width()
        });
        graph.render();
      });
    },
    exampleTwo: function() {
      // 散点图示例
      var seriesData = [[], [], []];
      var random = new Rickshaw.Fixtures.RandomData(150);
      var i = 0;
      var $element = $('#exampleScatterChart');
      var graph;
      var detail;
      var legend;
      var series;

      for (; i < 150; i += 1) {
        random.addData(seriesData);
      }

      graph = new Rickshaw.Graph({
        element: $element.get(0),
        width: $element.width(),
        height: 300,
        renderer: 'scatterplot',
        series: [
          {
            color: $.getColor('purple', 500),
            data: seriesData[0],
            name: '北京'
          },
          {
            color: $.getColor('red', 500),
            data: seriesData[1],
            name: '上海'
          },
          {
            color: $.getColor('green', 500),
            data: seriesData[2],
            name: '广州'
          }
        ]
      });
      graph.render();

      detail = new Rickshaw.Graph.HoverDetail({
        graph: graph
      });
      console.log(detail);

      legend = new Rickshaw.Graph.Legend({
        graph: graph,
        element: document.getElementById('exampleScatterLegend')
      });
      console.log(legend);

      series = new Rickshaw.Graph.Behavior.Series.Toggle({
        graph: graph,
        legend: legend
      });
      console.log(series);

      $(window).on('resize', function() {
        graph.configure({
          width: $element.width()
        });
        graph.render();
      });
    },
    exampleThree: function() {
      // 堆叠柱状图图示例
      var seriesData = [[], [], []];
      var random = new Rickshaw.Fixtures.RandomData(150);
      var i = 0;
      var $element = $('#exampleStackedChart');
      var graph;
      var detail;
      var legend;
      var series;

      for (; i < 150; i += 1) {
        random.addData(seriesData);
      }

      graph = new Rickshaw.Graph({
        element: $element.get(0),
        width: $element.width(),
        height: 300,
        renderer: 'bar',
        series: [
          {
            color: $.getColor('purple', 700),
            data: seriesData[0],
            name: '北京'
          },
          {
            color: $.getColor('purple', 500),
            data: seriesData[1],
            name: '上海'
          },
          {
            color: $.getColor('purple', 300),
            data: seriesData[2],
            name: '广州'
          }
        ]
      });
      graph.render();

      setInterval(function() {
        random.removeData(seriesData);
        random.addData(seriesData);
        graph.update();
      }, 2000);

      detail = new Rickshaw.Graph.HoverDetail({
        graph: graph
      });
      console.log(detail);

      legend = new Rickshaw.Graph.Legend({
        graph: graph,
        element: document.getElementById('exampleStackedLegend')
      });

      series = new Rickshaw.Graph.Behavior.Series.Toggle({
        graph: graph,
        legend: legend
      });
      console.log(series);

      $(window).on('resize', function() {
        graph.configure({
          width: $element.width()
        });
        graph.render();
      });
    },
    exampleFour: function() {
      // 区域图示例
      var seriesData = [[], [], []];
      var random = new Rickshaw.Fixtures.RandomData(150);
      var i = 0;
      var $element = $('#exampleAreaChart');
      var graph;
      var detail;
      var legend;
      var series;

      for (; i < 150; i += 1) {
        random.addData(seriesData);
      }

      graph = new Rickshaw.Graph({
        element: $element.get(0),
        width: $element.width(),
        height: 300,
        renderer: 'area',
        stroke: true,
        series: [
          {
            color: $.getColor('purple', 700),
            data: seriesData[0],
            name: '北京'
          },
          {
            color: $.getColor('purple', 500),
            data: seriesData[1],
            name: '上海'
          },
          {
            color: $.getColor('purple', 300),
            data: seriesData[2],
            name: '广州'
          }
        ]
      });
      graph.render();

      setInterval(function() {
        random.removeData(seriesData);
        random.addData(seriesData);
        graph.update();
      }, 2000);

      detail = new Rickshaw.Graph.HoverDetail({
        graph: graph
      });
      console.log(detail);

      legend = new Rickshaw.Graph.Legend({
        graph: graph,
        element: document.getElementById('exampleAreaLegend')
      });

      series = new Rickshaw.Graph.Behavior.Series.Toggle({
        graph: graph,
        legend: legend
      });
      console.log(series);

      $(window).on('resize', function() {
        graph.configure({
          width: $element.width()
        });
        graph.render();
      });
    },
    exampleFive: function() {
      // 组合图示例
      var seriesData = [[], [], [], [], []];
      var random = new Rickshaw.Fixtures.RandomData(50);
      var i = 0;
      var $element = $('#exampleMultipleChart');
      var graph;
      var preview;
      var detail;
      var legend;
      var series1;
      var series2;

      for (; i < 75; i += 1) {
        random.addData(seriesData);
      }

      graph = new Rickshaw.Graph({
        element: $element.get(0),
        width: $element.width(),
        height: 300,
        renderer: 'multi',
        dotSize: 5,
        series: [
          {
            name: '温度',
            data: seriesData.shift(),
            color: $.getColor('green', 500),
            renderer: 'stack'
          },
          {
            name: '体感温度',
            data: seriesData.shift(),
            color: $.getColor('cyan', 500),
            renderer: 'stack'
          },
          {
            name: '降雨量',
            data: seriesData.shift(),
            color: $.getColor('blue', 500),
            renderer: 'scatterplot'
          },
          {
            name: '空气质量',
            data: seriesData.shift().map(function(d) {
              return {
                x: d.x,
                y: d.y / 4
              };
            }),
            color: $.getColor('indigo', 500),
            renderer: 'bar'
          },
          {
            name: '紫外线',
            data: seriesData.shift().map(function(d) {
              return {
                x: d.x,
                y: d.y * 1.5
              };
            }),
            renderer: 'line',
            color: $.getColor('red', 500)
          }
        ]
      });
      preview = new Rickshaw.Graph.RangeSlider.Preview({
        graph: graph,
        element: document.querySelector('#exampleMultipleSlider')
      });

      console.log(preview);
      graph.render();

      detail = new Rickshaw.Graph.HoverDetail({
        graph: graph
      });
      console.log(detail);

      legend = new Rickshaw.Graph.Legend({
        graph: graph,
        element: document.querySelector('#exampleMultipleLegend')
      });

      series1 = new Rickshaw.Graph.Behavior.Series.Highlight({
        graph: graph,
        legend: legend,
        disabledColor: function() {
          return 'rgba(0, 0, 0, 0.2)';
        }
      });
      console.log(series1);

      series2 = new Rickshaw.Graph.Behavior.Series.Toggle({
        graph: graph,
        legend: legend
      });
      console.log(series2);

      $(window).on('resize', function() {
        graph.configure({
          width: $element.width()
        });
        graph.render();
      });
    }
  };

  $(function() {
    // 初始化图表示例
    $.each(rickshawPage, function(i, n) {
      n();
    });
  });
})(document, window, jQuery);
